<template>
	<view
		:style="'background: url(' + imgData.shareBg + ') no-repeat;background-size: contain;height:' + systemInfo.screenHeight + 'px;'">
		<u-navbar title=" " :autoBack="true" bgColor="transparent" leftIconColor="#fff" :fixed="false"></u-navbar>
		<view class="" style="padding-bottom: 120rpx;">
			<!-- <view class="name">
				邀好友 躺赚钱
			</view> -->
			<view class="content p-30">
				<view class="card p-30">
					<view class="">
						<view class="sention mb-10">
							我的邀请
						</view>
						<view class="small-size sub-color">
							（以下收入将自动结算到元宝钱包中）
						</view>
					</view>
					<view class="flex-row mt-30">
						<view class="flex-sub">
							<view class="sub-color">
								{{info.share_num}}
							</view>
							<view class="small-size mt-10 gray-color">
								成功邀请数
							</view>
						</view>
						<view class="flex-sub">
							<view class="sub-color">
								{{info.share_money}}
							</view>
							<view class="small-size mt-10 gray-color">
								元宝收益
							</view>
						</view>
						<!-- <view class="flex-sub">
							<view class="sub-color">
								10
							</view>
							<view class="small-size mt-10 gray-color">
								铜钱收益
							</view>
						</view> -->
						<view class="flex-sub">
							<view class="sub-color">
								{{info.level_text}}
							</view>
							<view class="small-size mt-10 gray-color">
								代理等级
							</view>
						</view>
					</view>
					<view class="flex-row mt-30">
						<view class="flex-sub" @click="jumpPage('/pages/share/money-log')">
							<view class="">
								<image src="/static/img/saher-nav-1.png" style="width: 60rpx;height: 60rpx;"
									mode="widthFix"></image>
							</view>
							<view class="small-size mt-10 gray-color">
								收益明细
							</view>
						</view>
						<view class="flex-sub" @click="apply">
							<view class="">
								<image src="/static/img/saher-nav-2.png" style="width: 60rpx;height: 60rpx;"
									mode="widthFix"></image>
							</view>
							<view class="small-size mt-10 gray-color">
								 {{info.check_state == 1 ? '已申请' : '申请代理'}}
							</view>
						</view>
						<view class="flex-sub" @click="jumpPage('/pages/share/list')">
							<view class="">
								<image src="/static/img/saher-nav-3.png" style="width: 60rpx;height: 60rpx;"
									mode="widthFix"></image>
							</view>
							<view class="small-size mt-10 gray-color">
								推广记录
							</view>
						</view>
						<view class="flex-sub" @click="jumpPage('/pages/share/poster')">
							<view class="">
								<image src="/static/img/saher-nav-4.png" style="width: 60rpx;height: 60rpx;"
									mode="widthFix"></image>
							</view>
							<view class="small-size mt-10 gray-color">
								去推广
							</view>
						</view>
					</view>
				</view>
				<view class="card p-30 mt-30">
					<view class="">
						<view class="sention mb-10">
							收益来源
						</view>
						<!-- <view class="small-size sub-color">
							（以下收入将自动结算到铜钱/元宝钱包中）
						</view> -->
					</view>
					<view class="">
						<view class="flex-row align-center justify-between box" v-for="(item,index) in shareData">
							<view class="flex-row align-center">
								<view class="">
									<image :src="item.icon" style="width: 60rpx;height: 60rpx;" mode="widthFix"></image>
								</view>
								<view class="flex-column align-start ml-30">
									<view class="size" style="color: #75290F;">
										{{item.name}}
									</view>
									<view class="small-size mt-10" style="color: #666666;">
										{{item.desc}}
									</view>
								</view>
							</view>
						<!-- 	<view class="">
								<u-button size="mini" color="linear-gradient( 91deg, #FF414A 0%, #FF6C60 100%)"
									shape="circle" text="去完成"></u-button>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<template v-if="info.check_state == 0">
				<u-button color="linear-gradient( 91deg, #FF414A 0%, #FF6C60 100%)" shape="circle"
					text="审核中"></u-button>
			</template>
			<template v-else-if="info.check_state == -1 || info.check_state == 2">
				<u-button @click="apply" color="linear-gradient( 91deg, #FF414A 0%, #FF6C60 100%)" shape="circle"
					text="立即申请"></u-button>
			</template>
			<template v-else>
				<u-button openType="share" color="linear-gradient( 91deg, #FF414A 0%, #FF6C60 100%)" shape="circle"
					text="立即邀请"></u-button>
			</template>
		</view>
		<u-popup :show="popupShow" mode="center" closeable @close="popupShow = false" round="10">
			<view class="p-30" style="padding: 60rpx;">
				<image :src="poster" style="width: 300rpx;height: 300rpx;" mode="widthFix"></image>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		shareInit,
		shareCreatePoster,
		shareApply
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				popupShow: false,
				info: {
					share_num: 0,
					share_money: 0,
					level_text: '无'
				},
				shareData: [{
						icon: '/static/img/share-icon-1.png',
						name: '每成功邀请1名注册用户',
						desc: '获得100元宝，赠送3次免费查看',
					},
					{
						icon: '/static/img/share-icon-2.png',
						name: '好友开通VIP',
						desc: '按代理等级获得相应的充值分成',
					},
					{
						icon: '/static/img/share-icon-3.png',
						name: '好友付费解锁,查看技师,充值元宝',
						desc: '获得其消费10%的分成',
					},
				],
				poster:""
			}
		},
		computed: {
			...mapState(["$userInfo", "isLogin", "systemInfo", "imgData", "configData", "p_id"]),
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData() {
				shareInit().then(res => {
					console.log('res', res);
					this.info = res
					// if(this.info.check_state == 1) {
					// 	uni.showModal({
					// 		title:"温馨提示",
					// 		content:'请等待审核',
					// 		showCancel:false,
					// 		success(e) {
					// 			if(e.confirm) {
					// 				uni.redirectTo({
					// 					url:'/pages/mine/index'
					// 				})
					// 			}
					// 		}
					// 	})
					// }
				})
			},
			apply() {
				if(this.info.check_state == 1) return false;
				let vm = this;
				uni.showModal({
					title: '提示',
					content: '确定申请代理?',
					showCancel: true,
					success(e) {
						console.log(e);
						if (e.confirm) {
							shareApply().then(res => {
								console.log('res', res);
								
								vm.$refs.uToast.show({
									type: 'success',
									message: '申请成功，请等待管理员审核...',
									complete() {
									
										vm.initData()
									}
								})
							})
						}
					}
				})

			},
			create() {
				shareCreatePoster().then(res => {
					console.log('res', res);
					this.poster = res
					this.popupShow = true;
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '分享',
				path: `/pages/home/home?user_id=${this.$userInfo.id}`
				// path: `/pages/home/home?user_id=2`
			}
		}
	}
</script>
<style>
	page {
		background: #FFDFCC;
	}
</style>
<style lang="scss" scoped>
	.content {
		margin-top: 380rpx;
	}

	.name {
		width: 100%;
		height: 118rpx;
		font-size: 96rpx;
		font-family: FZCuHeiSongS-B-GB, FZCuHeiSongS-B-GB;
		font-weight: 400;
		line-height: 113rpx;
		text-shadow: 0px 8px 8px #D93F41;
		background: linear-gradient(180deg, #FFE98F 0%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-align: center;
		margin-top: 50rpx;
	}

	.card {
		background-image: linear-gradient(#FFE0DD 2%, #FFFFFF 50%);
		display: flex;
		flex-direction: column;
		text-align: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.sub-color {
		color: #BA5715;
	}

	.box {
		padding: 30rpx;
		background: linear-gradient(90deg, #FDF3F2 0%, #FDE9EA 100%);
		border-radius: 10rpx;
		margin-top: 30rpx;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: transparent;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>